<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>vue的第一个例子</h2>
      <!-- 声明式渲染 -->
      <!-- 可以使用双大括号的语法，将js的data里面的变量直接用到html里面 -->
      <p>{{ message }}</p>
      <p>count: {{ count }}</p>
      <!-- v-开头的都是指令 -->
      <button v-on:click="fn">btn</button>

      <ul>
        <!-- <li v-for="item in list">{{ item }}</li> -->
        <!-- v-for做循环渲染 -->
        <li v-for="item in list">
          {{ item.productname }}的库存还剩{{ item.num }}
          <!-- v-model表示数据双向绑定, input标签的内容和data的变量绑定 -->
          - <input type="number" v-model="item.num" />
          <!-- v-if表示条件渲染 -->
          - <span v-if="+item.num === 0">卖完了</span>
        </li>
      </ul>

      <p>所有的库存还剩 {{ total }} 件</p>
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      // 从Vue解构createApp方法
      const { createApp } = Vue;

      // 生成一个app实例
      const app = createApp({
        // 像data，methods，computed等等叫做选项(options)
        // data叫做响应式数据
        data() {
          return {
            message: "hello 千锋!",
            count: 5,
            // list: ["🍎", "🍌", "🍉"]
            list: [
              {
                productname: "🍎",
                num: 5,
              },
              {
                productname: "🍌",
                num: 0,
              },
              {
                productname: "🍉",
                num: 6,
              },
            ],
          };
        },
        methods: {
          fn() {
            // 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
            // 在vue里，几乎不再有dom操作了，数据驱动
            this.count++;
          },
        },
        // 计算属性
        // 会根据已有的data的数据去计算出一个结果
        computed: {
          total() {
            return this.list.reduce((sum, item) => {
              return (sum += +item.num);
            }, 0);
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
